<template>
  <div>
      <auth-tag  tips="无权访问">
         <div style="background-color: #fff;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="主要土壤养分" name="first">
            <template #label><i class="vxe-icon-maximize"></i> 主要土壤养分</template>
                <div style="height:81vh;overflow: auto;">
                  <div class="max-title">土壤样品所属区域：{{getTitleLine}} <span style="padding-left:50px">检测时间：{{dataList.length>0?formatDate(dataList[0].testDateTime):'--'}}</span></div>
                  <div class="progress-list">
                    <div class="item" v-for="item in progressList">
                      <div class="left-view">
                        <div class="title">{{item.title}}</div>
                        <div class="name">{{item.unit}}</div>
                      </div>
                      <div class="progress-view">
                        <span class="tips">{{item.label}}</span>
                        <el-progress :percentage="item.percentage||0" color="#04AE70" :format="getFormatText"></el-progress>
                        <span class="right-text">{{getRightText(item.type,item.value)}}</span>
                      </div>
                    </div>
                  </div>
                  <vxe-table
                    border
                    size="mini"
                    :scroll-y="{enabled: true}"
                    :min-height="100"
                    :max-height="300"
                    :data="getObject.testDateTime?[getObject]:[]">
                    <vxe-colgroup :title="getTitle" align="center">
                      <vxe-column field="testDateTime" title="检测日期">
                        <template #default="{ row }">
                          {{formatDate(row.testDateTime)}}
                      </template>
                      </vxe-column>
                      <!-- <vxe-column  show-overflow field="province" title="所属区域">
                        <template #default="{ row }">
                          {{getTitleLine}}
                        </template>
                      </vxe-column> -->
                      <vxe-column field="ph" title="pH(无量纲)"></vxe-column>
                      <vxe-column field="som" title="有机质(%)"></vxe-column>
                      <vxe-column field="tn" title="全氮(g/kg)"></vxe-column>
                      <vxe-column field="an" title="碱解氮(mg/kg)"></vxe-column>
                      <vxe-column field="p" title="有效磷(mg/kg)"></vxe-column>
                      <vxe-column field="k" title="速效钾(mg/kg)"></vxe-column>
                      <vxe-column field="unitWeight" title="土壤容重(g/m3)"></vxe-column>
                      <vxe-column field="s" title="硫(mg/kg)"></vxe-column>
                      <vxe-column field="b" title="有效硼(mg/kg)"></vxe-column>
                      <vxe-column field="source" title="数据来源">
                        <template #default="{ row }">
                          {{row.source==1?'系统':'用户'}}
                        </template>
                      </vxe-column>
                    </vxe-colgroup>
                  </vxe-table>
                  <div class="max-title">主要土壤养分趋势变化</div>
                <div class="total-view">
                  <el-date-picker
                    v-model="value1"
                    type="monthrange"
                    format="YYYY"
                    @change="changeDate"
                    value-format="YYYY"
                    style="width:180px"
                    range-separator="至"
                    start-placeholder="开始"
                    end-placeholder="结束">
                  </el-date-picker>
                  <div style="padding-left:20px;">共计<span style="padding:0 10px">{{dataList.length}}</span>次土壤检测数据</div>
                </div>
                  <div class="chart-list">
                    <div class="item" v-for="item in chartList">
                      <chartView 
                        :title="item.title" 
                        :type="item.type"
                        :list="item.data"
                        :min="item.min"
                        :max="item.max" 
                        :splitNumber="item.splitNumber"
                        :xList="item.xList" />
                    </div>
                  </div>
                  <div style="text-align: right;">
                    <vxe-switch v-model="showCell" size="small" open-label="隐藏列" close-label="显示列"></vxe-switch>
                  </div>
                  <vxe-table
                    border
                    style="margin-top:10px"
                    :min-height="100"
                    size="mini"
                    :scroll-y="{enabled: true}"
                    :data="dataList">
                    <vxe-column align="center" field="name" title="检测日期" width="120">
                      <template #default="{ row }">
                          {{formatDate(row.testDateTime)}}
                      </template>
                    </vxe-column>
                    <vxe-colgroup align="center" title="检测指标">
                      <vxe-column align="center" field="ph" title="PH(无量纲)"></vxe-column>
                      <vxe-column align="center" field="som" title="有机质(%)"></vxe-column>
                      <vxe-column align="center" field="tn" title="全氮(g/kg)"></vxe-column>
                      <vxe-column align="center" field="an" title="碱解氮(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="p" title="有效磷(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="k" title="速效钾(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="s" title="硫(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="b" title="有效硼(mg/kg)"></vxe-column>
                      <template v-if="showCell">
                      <vxe-column align="center" field="ec" title="EC值(s/cm)"></vxe-column>
                      <vxe-column align="center" field="unitWeight" title="容重(g/cm3)"></vxe-column>
                      <vxe-column align="center" field="mo" title="总钼(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="fe" title="有效铁(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="mn" title="锰(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="cu" title="铜(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="zn" title="锌(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="cadmium" title="镉(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="cr" title="铬(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="pb" title="铅(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="hg" title="汞(mg/kg)"></vxe-column>
                      <vxe-column align="center" field="arsenic" title="砷(mg/kg)"></vxe-column>
                    </template>
                    </vxe-colgroup>
                    <vxe-column align="center" field="name" title="数据来源">
                      <template #default="{ row }">
                          {{row.source==1?'系统':'用户'}}
                        </template>
                    </vxe-column>
                  </vxe-table>
              </div>
          </el-tab-pane>
          <el-tab-pane label="导入/导入记录" name="three">
            <template #label><i class="vxe-icon-upload"></i> 导入/导入记录</template>
            <div style="height:81vh;overflow-y: auto;overflow-x: hidden; width:100%">
               <el-form ref="form">
                    <el-form-item label="选择区域">
                        <el-cascader
                         style="width:400px"
                         filterable
                         clearable
                        :options="selectList"
                        :props="{label:'name',value:'name'}"
                        @change="handleChange"></el-cascader>
                        <el-upload
                        :data="{source:2,farmId:userStore.userInfo.farmId,...dataUpdate}"
                        :on-change="onChange"
                        :before-upload="beforeUpload"
                        :accept="'.xls,.xlsx'"
                        :show-file-list="false"
                         :action="'/boss/farmland-composition/import-farmland-composition'">
                             <vxe-button  size="small" style="margin-left:10px" status="primary"  
                             content="导入数据" icon="vxe-icon-cloud-download"></vxe-button>
                          </el-upload>
                        <vxe-button  size="small" style="margin-left:10px" 
                        @click="btnDown" content="下载模板" icon="vxe-icon-cloud-upload"></vxe-button>

                    </el-form-item> 
                </el-form>
                <div style="color:#F56C6C;font-size:13px">提示：下载模板根据模板内容填写测土数据，然后选择测土的范围来导入测土数据。例如,测土取样了某某村，导入测土数据时选择某某村导入要导入。</div>
                <div class="table-list">
                    <vTable   ref="vGridTable" 
                    :columnsList="columnsList"
                    apiUrl="/boss/tanc-farm-land-composition-log/tanc-farm-land-composition-log-list"
                    :pageSize="15"
                    :queryData="{farmId:userStore.userInfo.farmId}"
                    :toolbarConfig="false">
                    <template #actions="{row}">
                        <el-button class="delBtn btn-del" icon="delete" size="small" @click="del(row)">删除</el-button>
                  </template>
                 </vTable>
                </div>
              </div>
            </el-tab-pane>
          <el-tab-pane label="土壤常见理化指标评价分级标准" name="second">
            <template #label><i class="vxe-icon-folder"></i>土壤常见理化指标评价分级标准</template>
            <div style="height:81vh;overflow: auto;">
            <template v-if="activeName=='second'">
                <vxe-table
                  border
                  style="margin-bottom:20px;width:600px"
                  size="mini"
                  :min-height="60"
                  :data="tableData.filter((item)=>{return item.compCode=='unitWeight'})"> 
                  <vxe-colgroup title="表1 容重分级（g/m3）" align="center">
                    <vxe-column field="compDescription" title="分级" align="center"></vxe-column>
                    <vxe-column field="level1" title="过松" align="center"></vxe-column>
                    <vxe-column field="level2" title="适直" align="center"></vxe-column>
                    <vxe-column field="level3" title="偏紧" align="center"></vxe-column>
                    <vxe-column field="level4" title="紧实" align="center"></vxe-column>
                    <vxe-column field="level5" title="过紧实" align="center"></vxe-column>
                    <vxe-column field="level6" title="坚实" align="center"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                   style="margin-bottom:20px;width:600px"
                  :scroll-y="{enabled: true}"
                  size="mini"
                  :min-height="60"
                  :data="tableData.filter((item)=>{return item.compCode=='ph'})">
                  <vxe-colgroup title="表2 酸碱度分级标准表（无量纲）" align="center">
                    <vxe-column field="compDescription" align="center" title="等级"></vxe-column>
                    <vxe-column field="level1" align="center" title="强酸性"></vxe-column>
                    <vxe-column field="level2" align="center" title="酸性"></vxe-column>
                    <vxe-column field="level3" align="center" title="微酸性"></vxe-column>
                    <vxe-column field="level4" align="center" title="中性"></vxe-column>
                    <vxe-column field="level5" align="center" title="微碱性"></vxe-column>
                    <vxe-column field="level6" align="center" title="碱性"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                  size="mini"
                  style="margin-bottom:20px;width:70%"
                  :data="table3">
                  <vxe-colgroup title="表3 有机质、氮磷钾全量养分和有效养分含量分级" align="center">
                    <vxe-column field="data" align="center" title="等级"></vxe-column>
                    <vxe-column field="data1" align="center" title="有机质(%)"></vxe-column>
                    <vxe-column field="data2" align="center" title="全氮 g/kg"></vxe-column>
                    <vxe-column field="data3" align="center" title="全磷 g/kg "></vxe-column>
                    <vxe-column field="data4" align="center" title="全钾 g/kg"></vxe-column>
                    <vxe-column field="data5" align="center"  title="碱解氮 mg/kg"></vxe-column>
                    <vxe-column field="data6" align="center" title="有效磷 mg/kg"></vxe-column>
                    <vxe-column field="data7" align="center" title="速效钾 mg/kg"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                  style="margin-bottom:20px;width:70%"
                  size="mini"
                  :data="table4">
                  <vxe-colgroup align="center" title="表4  有效中量元素和有效微量元素分级  (mg/kg)">
                    <vxe-colgroup title="">
                    <vxe-column field="data" title="等级" align="center"></vxe-column>
                  </vxe-colgroup>
                  <!-- <vxe-colgroup title="中量元素" align="center">
                    <vxe-column field="data1" title="有效钙" align="center"></vxe-column>
                    <vxe-column field="data2" title="有效镁" align="center"></vxe-column>
                    <vxe-column field="data3" title="有效硅" align="center"></vxe-column>
                    <vxe-column field="data4" title="有效硫" align="center"></vxe-column>
                  </vxe-colgroup> -->
                  <vxe-colgroup title="微量元素" align="center">
                    <vxe-column field="data5" title="有效硼" align="center"></vxe-column>
                    <vxe-column field="data6" title="有效钼" align="center"></vxe-column>
                    <vxe-column field="data7" title="有效锰" align="center"></vxe-column>
                    <vxe-column field="data8" title="有效锌" align="center"></vxe-column>
                    <vxe-column field="data9" title="有效铜" align="center"></vxe-column>
                    <vxe-column field="data10" title="有效铁" align="center"></vxe-column>
                  </vxe-colgroup>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                   style="margin-bottom:20px;width:400px"
                  size="mini"
                  :data="[{title:'1',data1:'>20',data2:'强'},{title:'2',data1:'10~20',data2:'中'},{title:'3',data1:'<10',data2:'弱'}]">
                  <vxe-colgroup align="center" title="表5 阳离子交换量分级标准表  (cmol(+)/kg土)">
                    <vxe-column align="center" field="title" title="等级"></vxe-column>
                    <vxe-column align="center" field="data1" title="阳离子交换量"></vxe-column>
                    <vxe-column align="center" field="data2" title="保肥性能"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
                <vxe-table
                  border
                  size="mini"
                  style="margin-bottom:20px;width:70%"
                  :data="table6">
                  <vxe-colgroup align="center" title="表6 土壤饱和浸出液的电导率与盐分和作物生长关系">
                    <vxe-column align="center" field="data" width="140" title="盐渍化程度"></vxe-column>
                    <vxe-column align="center" field="data1" title="饱和浸出液EC25（dS/m）"></vxe-column>
                    <vxe-column align="center" field="data2" title="盐分（g/kg）"></vxe-column>    
                    <vxe-column align="left" field="data3" title="植物反应"></vxe-column>
                  </vxe-colgroup>
                </vxe-table>
            </template>
            </div>
          </el-tab-pane>
        </el-tabs>
        </div>
    </auth-tag>
</div>
</template>

<script setup name="Factor-Team-List">
import { nextTick, ref, watch, onActivated, reactive, onMounted,computed } from 'vue'
import { useRouter } from 'vue-router'
import mainLayout from '@/components/custom/mainLayout.vue'
import { useUserStore } from '@/pinia/modules/user'
import {VXETable} from 'vxe-table'
import { ElMessageBox } from 'element-plus'
import {getLandList} from '@/api/plant'
import {
  getCompositionList,
  getCompositionStandardList,
  downTemplate,
  importComposition,
  deleteComposition,
  getDistrictList,
  saveComposition,editComposition,
  delComposition,
  getFarmlandCompositionList
} from '@/api/gis'

import {formatDate} from '@/utils/format'
import chartView from '../components/chart.vue'
import areaList from '@/api/areaList'
import { downloadFile } from '@/utils/downloadFile'
const userStore = useUserStore()
const baseUrl = import.meta.env.VITE_BASE_API
const activeName = ref('first')
const value1 = ref('')
const vGridTable = ref(null)
const showCell = ref(false)
const dataList = ref([])
const tableData= ref([])
const chartList = ref([])
const selectList = ref(areaList)
const getObject = computed(()=>{
  if(dataList.value.length>0){
    let row = dataList.value[0]
    return row
  }else{
    return {}
  }
})
const getTitle = computed(()=>{
  if(dataList.value.length>0){
    let row = dataList.value[0]
    if(row.province!=row.city){
      return `${row.province}/${row.city}/${row.district}/${row.street}主要土壤养分数据表 (${formatDate(row.testDateTime)})`
    }else{
      return `${row.province}/${row.district}/${row.street}主要土壤养分数据表 (${formatDate(row.testDateTime)})`
    }
    
  }else{
    return '--'
  }
})
const getTitleLine = computed(()=>{
  if(dataList.value.length>0){
    let row = dataList.value[0]
    if(row.province!=row.city){
      return `${row.province}/${row.city}/${row.district}/${row.street}`
    }else{
      return `${row.province}/${row.district}/${row.street}`
    }
  }else{
    return '--'
  }
})
let progressList =ref([])

let table3 =ref([])
let tableRef =ref(null)
let dataUpdate =ref({})

let table4 =ref([])

const table6 = ref([
  {data:'1(非盐渍化)', data1:'<2',data2:'<1',data3:'对作物不产生盐害'},
  {data:'2(轻度盐渍化)', data1:'2~4',data2:'1~3',data3:'对盐分极敏感的作物产量可能受到影响'},
  {data:'3(中度盐渍化)', data1:'4~8',data2:'3~5',data3:'对盐分敏感作物产量受到影响，但对耐盐作物无多大影响'},
  {data:'4(重度盐渍化)', data1:'8~16',data2:'5~10',data3:'只有耐盐作物有收成，但影响种子发芽，而且出现缺苗，严重影响产量'},
  {data:'5(极重盐渍化)', data1:'>16',data2:'>10',data3:'只有极少数耐盐植物才能生长'}
])


const emit = defineEmits(['close'])

  onMounted(async () => {
    getData({})
   let res= await getCompositionStandardList()
   if(res.success){
     tableData.value = res.data ||[]
     let list = res.data ||[]
     let som = list.find((item)=>item.compCode=='som')
     let tn = list.find((item)=>item.compCode=='tn')
     let an = list.find((item)=>item.compCode=='an')
     let p = list.find((item)=>item.compCode=='p')
     let k = list.find((item)=>item.compCode=='k')
      table3.value =[
        {data:'一级(极丰富)',data1:som.level1,data2:tn.level1,data3:p.level1,data4:k.level1,data5:an.level1,data6:p.level1,data7:k.level1},
        {data:'二级(丰富)',data1:som.level2,data2:tn.level2,data3:p.level2,data4:k.level2,data5:an.level2,data6:p.level2,data7:k.level2},
        {data:'三级(适量)',data1:som.level3,data2:tn.level3,data3:p.level3,data4:k.level3,data5:an.level3,data6:p.level3,data7:k.level3},
        {data:'四级(较缺乏)',data1:som.level4,data2:tn.level4,data3:p.level4,data4:k.level4,data5:an.level4,data6:p.level4,data7:k.level4},
        {data:'五级(缺乏)',data1:som.level5,data2:tn.level5,data3:p.level5,data4:k.level5,data5:an.level5,data6:p.level5,data7:k.level5},
        {data:'六级(极缺)',data1:som.level6,data2:tn.level6,data3:p.level6,data4:k.level6,data5:an.level6,data6:p.level6,data7:k.level6}
      ]

      let b = list.find((item)=>item.compCode=='b')
      let mo = list.find((item)=>item.compCode=='mo')
      let mn = list.find((item)=>item.compCode=='mn')
      let zn = list.find((item)=>item.compCode=='zn')
      let fe = list.find((item)=>item.compCode=='fe')
       table4.value =[
        {data:'一级（极丰富）',data1:'＞1000',data2:'>300',data3:'>230',data4:'>30',data5:b.level1,data6:mo.level1,data7:mn.level1,data8:zn.level1,data9:'>1.8',data10:fe.level1},
        {data:'二级（丰富）',data1:'700~1000',data2:'200~300',data3:'115~230',data4:'16~30',data5:b.level2,data6:mo.level2,data7:mn.level2,data8:zn.level2,data9:'1.0~1.8',data10:fe.level2},
        {data:'三级（适量）',data1:'500~700',data2:'100~200',data3:'70~115',data4:'<16',data5:b.level3,data6:mo.level3,data7:mn.level3,data8:zn.level3,data9:'0.2~1.0',data10:fe.level3},
        {data:'四级（缺乏）',data1:'300~700',data2:'50~100',data3:'25~70',data4:'-',data5:b.level4,data6:mo.level4,data7:mn.level4,data8:zn.level4,data9:'0.1~0.2',data10:fe.level4},
        {data:'五级（极缺）',data1:'＜300',data2:'<50',data3:'<25',data4:'-',data5:b.level1,data5:'<0.1',data6:mo.level5,data7:mn.level5,data8:zn.level5,data9:'<0.1',data10:fe.level5}
      ]
   }
  })

  const handleClick = (val)=>{
  }
  const columnsList = ref([
      {type: 'seq', title: '序号',width:'60',align:'center'},
      {field: 'areaImportLocation', title: '导入范围',minWidth:'160',align:'center'},
      {field: 'testDate', title: '检测日期',minWidth:'130',align:'center'},
      {field: 'creatorName', title: '创建人',minWidth:'180',align:'center'},
      {field: 'createTime', title: '创建时间',minWidth:'180',align:'center'},
      {title: '操作', width: 260,fixed:'right', slots: {default: 'actions'}}
   ])

   const handleChange = (list)=>{
    if(list){
      dataUpdate.value={
        province:list[0],
        city:list[1],
        district:list[2],
        street:list[3],
     }
    }else{ 
      dataUpdate.value={
        province:null,
        city:null,
        district:null,
        street:null
       }
    }
}
const btnDown =async ()=>{
    let res = await downTemplate()
    if(res){
        downloadFile(res,'土壤养分模板')
    }
}
const refreshTable = () => {
  vGridTable.value.loadData()
}
const onChange =(file)=>{
    if(file?.response){
        VXETable.modal.message({ content: file?.response.message, status:file?.response.success?'success':'error'})
        refreshTable()
        getData({})
    }
}

const addCell = ()=>{
  dataList.value.push({source:2,farmLandIds:[765]})
  editRowEvent(dataList.value[dataList.value.length-1])
}
const removeCell = (index)=>{
  dataList.value.splice(index,1)
}


const beforeUpload =()=>{
    if(!dataUpdate.value.province){
        VXETable.modal.message({ content: '请选择区域', status:'error'})
        return false
    }
}
const del = (item)=>{
    ElMessageBox.confirm('确认删除吗?','提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await deleteComposition([item.compositionLogId])
        if(res.success){
            refreshTable()
        }
    })
}
const btnDel = (item)=>{
    ElMessageBox.confirm('确认删除吗?','提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await delComposition([item.compositionId])
        if(res.success){
          getData({})
        }
    })
}


const getData = async (obj)=>{
   let data= userStore.userInfo.farmList?.find((item)=>item.farmId==userStore.userInfo.farmId)
    let res = await getCompositionList({
        page:1,
        limit:1000,
        province:data.province,
        farmId:data.farmId,
        city:data.city,
        district:data.district,
        street:data.street,
        testDateTimeEnd: obj.endTime,
        testDateTimeStart:obj.startTime
    })
    if(res.success){
      dataList.value = res.data ||[]
      let row = res.data[0]||{}
       progressList.value =[
        {title:'酸碱程度',unit:'PH',type:1,label:(row.ph||'-')+'无量纲',value:row.ph,percentage:row.ph*10},
        {title:'有机质',unit:'SOM',type:2,label:(row.som||'-')+'%',value:row.som,percentage:row.som},
        {title:'全氮',unit:'TN',type:3,label:(row.tn||'-')+'g/kg',value:row.tn,percentage:(row.tn/1.5)*100},
        {title:'碱解氮',unit:'AN',type:4,label:(row.an||'-')+'mg/kg',value:row.an,percentage:(row.an/150)*100},
        {title:'有效磷 ',unit:'AP',type:5,label:(row.p||'-')+'mg/kg',value:row.p,percentage:(row.p/40)*100},
        {title:'速效钾 ',unit:'AK',type:6,label:(row.k||'-')+'mg/kg',value:row.k,percentage:(row.k/200)*100}
      ]
      chartList.value =[
        {title:'近年土壤酸碱度变化趋势(无量纲)',type:1, min:3.5,max:9.5,splitNumber:10, data:res.data.map((item)=>item.ph),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤有机质变化趋势(%)',type:2, min:0,max:50,splitNumber:5,data:res.data.map((item)=>item.som),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤全氮含量变化趋势(g/kg)',type:3, min:0,max:2,splitNumber:5,data:res.data.map((item)=>item.tn),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤碱解氮含量变化趋势(mg/kg)',type:4, min:0,max:180,splitNumber:5,data:res.data.map((item)=>item.an),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤有效磷含量变化趋势(mg/kg)',type:5, min:0,max:50,splitNumber:5,data:res.data.map((item)=>item.p),xList:res.data.map((item)=>formatDate(item.testDateTime))},
        {title:'近年土壤速效钾含量变化趋势(mg/kg)',type:6, min:0,max:250,splitNumber:5,data:res.data.map((item)=>item.k),xList:res.data.map((item)=>formatDate(item.testDateTime))}
      ]
    }

  //  let fres = await getFarmlandCompositionList({farmId:data.farmId})

  //  if(fres.success){
  //   console.log(fres.data,'===========3')
  //  }
  }
  const getFormatText=(percentage)=> {
      return ''
  }

  const getRightText=(type,data)=> {
    let value =Number(data||0)
     if(type==1){
        return getPh(value)
     }else if(type==2){
       return getSOM(value)
     }else if(type==3){
       return getTN(value)
     }else if(type==4){
       return getAN(value)
     }else if(type==5){
       return getP(value)
     }else if(type==6){
       return getK(value)
     }
  }

  const getK=(value)=>{
       if(value>=200){
          return '极丰富'
        }else if(value>=150&&value<200){
          return '丰富' 
        }else if(value>=100&&value<150){
          return '适量' 
        }else if(value>=50&&value<100){
          return '较缺乏' 
        }else if(value>=30&&value<50){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }

  const getP=(value)=>{
       if(value>=40){
          return '极丰富'
        }else if(value>=20&&value<40){
          return '丰富' 
        }else if(value>=10&&value<20){
          return '适量' 
        }else if(value>=5&&value<10){
          return '较缺乏' 
        }else if(value>=3&&value<5){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }
  
  const getAN=(value)=>{
       if(value>=150){
          return '极丰富'
        }else if(value>=120&&value<150){
          return '丰富' 
        }else if(value>=90&&value<120){
          return '适量' 
        }else if(value>=60&&value<90){
          return '较缺乏' 
        }else if(value>=30&&value<60){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }
  
  const getTN=(value)=>{
       if(value>=1.5){
          return '极丰富'
        }else if(value>=1&&value<1.5){
          return '丰富' 
        }else if(value>=0.5&&value<1){
          return '适量' 
        }else if(value>=0.25&&value<0.5){
          return '较缺乏' 
        }else if(value>=0.2&&value<0.25){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }

  const getSOM=(value)=>{

       if(value>=40){
          return '极丰富'
        }else if(value>=30&&value<40){
          return '丰富' 
        }else if(value>=20&&value<30){
          return '适量' 
        }else if(value>=10&&value<20){
          return '较缺乏' 
        }else if(value>=6&&value<10){
          return '缺乏' 
        }else{
          return '极缺'
      }
   }

   const getPh=(value)=>{
       if(value>=8.5){
          return '碱性'
        }else if(value>7.5&&value<8.5){
          return '微碱性' 
        }else if(value>6.5&&value<7.5){
          return '中性' 
        }else if(value>5.5&&value<6.5){
          return '微酸性' 
        }else if(value>4.5&&value<5.5){
          return '酸性' 
        }else{
          return '强酸性'
      }
   }
  
  const changeDate = (val)=>{
    if(val){
      getData({startTime:val[0],endTime:val[1]})
    }else{
      getData({})
    }
  }

  const isActiveStatus = (row) => {
  const $table = tableRef.value
  if ($table) {
    return $table.isEditByRow(row)
  }
}

const editRowEvent = (row) => {
  const $table = tableRef.value
  if ($table) {
    $table.setEditRow(row)
  }
}

const saveRowEvent =async (row) => {
  let data= userStore.userInfo.farmList.find((item)=>item.farmId==userStore.userInfo.farmId)
  let lres =await getLandList({farmId:data.farmId,limit:1,page:1})
  if(lres.success){
    row.farmLandIds =[lres.data[0]?.farmLandId]
    let res =row.compositionId?await editComposition(row):await saveComposition(row)
    if(res.success){
        VXETable.modal.message({ content: '保存成功',status:'success' })
        cancelRowEvent(row)
        getData({})
      }else{
        VXETable.modal.message({ content: res.message,status:'error' })
      }
  }
}

const cancelRowEvent = (row) => {
  const $table = tableRef.value
  if ($table) {
    $table.clearEdit().then(() => {
      // 还原行数据
      $table.revertData(row)
    })
  }
}

const onClose = ()=>{
    emit('close')
}

</script>

<style lang="scss" scoped>
.edit-title-view{
  display:flex;
  justify-content: space-between;
  padding:13px 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  .name{
    font-size:16px;
    font-weight: bold;
    position: relative;
    text-indent:8px;
    &::after{
      position: absolute;
      height:16px;
      width:2px;
      content: '';
      left:0;
      background-color: #04AE70;
    }
  }
  .vxe-icon-close{
    font-size:16px;
    color:#888;
    cursor: pointer;
  }
}
.max-title{
  font-size:15px;
  position: relative;
  padding:20px 0;
  color:#333;
  font-weight: bold;
  text-indent:5px;
  &::after{
    position: absolute;
    content: "";
    height: 15px;
    width: 2px;
    background-color: #04AE70;
    left: 0;
    top:50%;
    margin-top:-7.5px;
  }
}
.progress-list{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding:20px 0;
  .item{
    position: relative;
    width: 30%;
    display: flex;
    align-items: center;
    margin-bottom:20px;
    .left-view{
      width: 100px;
      text-align: center;
      font-size:13px;
      color:#333;
    }
    .progress-view{
      width:60%;
      position: relative;
      .tips{
        position: absolute;
        font-size: 13px;
        color: #333;
        top: -28px;
      }
      .right-text{
        position: absolute;
        right: 0;
        font-size: 13px;
        color: #333;
        top: -5px;
        width:40px;
      }
    }
  }
}
.chart-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top:20px;
  .item{
    height:300px;
    width:30%;
    margin: 10px auto;
    position: relative;
  }
}
.total-view{
  display: flex;
  align-items: center;
  font-size:15px;
  color: #333;
  width:400px;
}
.table-list{
        height: calc(100vh - 285px);
        padding-top:20px;
    }
</style>
